<template>
  <div class="chargeone">
    <div class="chargeBox">
      <div>
        <p><span>14</span>
          <small>个</small>
        </p>
        <p>
          <span>50</span>
          <small>车道</small>
        </p>
      </div>
      <div class="down">
        <p>收费站数量</p>
        <p>接入车道</p>
      </div>
    </div>
    <div class="chargeBox">
      <div>
        <p><span>14</span>
          <small>个</small>
        </p>
        <p>
          <span></span>
          <small></small>
        </p>
      </div>
      <div class="down">
        <p>未接入车道</p>
        <p></p>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "chargeone",
  }
</script>

<style lang='scss' scoped>
  .chargeone {
    width: 100%;
    height: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    .chargeBox{
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      div{
        height: 100%;
        flex:2;
        display: flex;
        flex-direction: row;
        p{
          margin:0;
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-end;
          span {
            font-size: 44px;
          }
          small {
            font-size: 15px;
            margin-left: 15px;
            padding-bottom: 10px;
          }
        }
      }
      .down{
        flex:1;
        p{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;
          margin-top:10px;
          font-size: 15px;
        }
      }


    }

  }
</style>
